import React from 'react'
import { View, Image, Text, StyleSheet } from 'react-native'

export default function Cart(props) {
    return (
        <View style={styles.container}>
            <Text style={styles.discount}>DealCard {(100 - props.discount * 100).toFixed(0)}% OFF</Text>
            <View style={styles.cartRow}>
                {/* cart */}
                <View style={styles.cartContainer}>
                    <Image style={styles.cartIcon} source={require('../assets/cart.png')} />
                    <View style={styles.cartCountContainer}>
                        <Text style={styles.cartCount}>{props.count}</Text>
                    </View>
                </View>
                {/* right part */}
                <View style={styles.right}>
                    {/* deal card */}
                    <View style={styles.dealCardContainer}>
                        <View style={styles.dealCardBox}><Text style={styles.dealCardText}>DealCard</Text></View>
                    </View>
                    {/* price */}
                    <View style={styles.priceContainer}>
                        <Text style={styles.originalPrice}>${props.sum}</Text>
                        <Text style={styles.price}>${(props.sum * props.discount).toFixed(2)}</Text>
                    </View>
                    {/* buy now */}
                    <View style={styles.buyButton}><Text style={styles.buyText}>Buy Now</Text></View>
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    buyButton: {
        backgroundColor: '#70a64b',
        borderTopRightRadius: 35,
        borderBottomRightRadius: 35,
        paddingLeft: 10,
        paddingRight: 10,
        justifyContent: 'center',
        alignItems: 'center'
    },
    buyText: {
        color: '#fff',
        fontSize: 20,
    },
    priceContainer: {
        flexDirection: 'column',
        alignItems: 'flex-end',
        justifyContent: 'space-evenly',
        marginLeft: 10,
        marginRight: 10,
    },
    originalPrice: {
        color: '#fff',
    },
    price: {
        color: '#839e6d',
        fontSize: 18,
    },
    container: {
        height: 142,
        backgroundColor: '#ecfedf',
        textAlign: 'center',
        paddingTop: 10,
        paddingLeft: 20,
        paddingRight: 20
    },
    discount: {
        textAlign: 'center',
        color: '#8db569',
    },
    cartRow: {
        flexDirection: 'row',
        backgroundColor: '#191c19',
        height: 60,
        marginTop: 10,
        borderRadius: 35,
        justifyContent: 'space-between'
    },
    cartContainer: {
        backgroundColor: '#71a54b',
        height: 60,
        width: 60,
        borderRadius: 35,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    cartIcon: {
        width: 40,
        height: 40,
    },
    cartCountContainer: {
        color: '#fff',
        backgroundColor: '#275619',
        width: 15,
        height: 15,
        lineHeight: 15,
        textAlign: 'center',
        borderRadius: 7.5,
        alignContent: 'center',
        marginTop: -30,
        marginLeft: -15,
    },
    cartCount: {
        color: '#fff',
        width: 15,
        lineHeight: 15,
        textAlign: 'center'
    },
    right: {
        flexDirection: 'row',
    },
    dealCardContainer: {
        flexDirection: 'column',
        justifyContent: 'flex-end',
        paddingBottom: 10,
    },
    dealCardBox: {
        backgroundColor: '#65af44',
        padding: 3,
        borderRadius: 10,
        borderBottomLeftRadius: 0
    },
    dealCardText: {
        color: '#fff',
    }
})